
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>修复抖函数的问题</title>
<style>
img { width:100px; height:100px; position:absolute; top:200px; }
</style>
<script>

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

function shake ( obj, attr, endFn ) {

	if( obj.shaked ) { return; }
	obj.shaked = true;
	var pos = parseInt( getStyle(obj, attr) );			// 有隐患的
	
	var arr = [];			// 20, -20, 18, -18 ..... 0
	var num = 0;
	
		
	for ( var i=20; i>0; i-=2 ) {
		arr.push( i, -i );
	}
	arr.push(0);
	
	clearInterval( obj.shake );
	obj.shake = setInterval(function (){
		obj.style[attr] = pos + arr[num] + 'px';
		num++;
		if ( num === arr.length ) {
			clearInterval( obj.shake );
			endFn && endFn();
			obj.shaked = false;
		}
	}, 50);
}

window.onload = function () {
	var aImg = document.getElementsByTagName('img');
	
	for ( var i=0; i<aImg.length; i++ ) {
		aImg[i].style.left = 80+i*110 + 'px';
		
		aImg[i].onmouseover = function () {
			shake( this, 'top');
		};
	}
};
</script>

</head>

<body>

<img src="9-img/1.jpg" />
<img src="9-img/2.jpg" />
<img src="9-img/3.jpg" />
<img src="9-img/4.jpg" />
<img src="9-img/5.jpg" />
<img src="9-img/6.jpg" />
<img src="9-img/7.jpg" />
<img src="9-img/8.jpg" />

</body>
</html>
